<template>
  <view>
    <status-bar></status-bar>
    <uni-nav-bar color="#000" left-icon="left" @clickLeft="navBack()" title="历史记录">
      <view slot="right" style="color: #219b87; font-size: 28rpx;" @click="navTo('/pages/screen/screen')">筛选记录
      </view>
    </uni-nav-bar>

    <view class="statistics">
      <view class="leftTitle">
        总次数:{{ getAllnums() }}
      </view>
      <view class="rightTitle">
        <!-- 总时长:{{getAlltimes()/60}}小时 -->
        总时长:{{ (getAlltimes() / 60).toFixed(1) }}小时
      </view>
    </view>

    <view class="collapse_box">
      <uni-collapse>
        <uni-collapse-item :title="item.months+'  实验'+item.histories.length+'次'" class="allExper-collapse"
                           v-for="(item,index) in menulist" :key="index">
          <view>
            <view class="exper-single" v-for="(it,ind) in menulist[index].histories" :key="ind"
                  @touchstart="startPress($event, index, ind)" @touchend="endPress()">
              <view class="text_box"
                    @click="navTo('/pages/expertrecord/expertrecord?serialnum_history='+it.serialnum_history)">
                <view class="name_exper">
                  <text class="text" :style="{ color: it.rate_exper === 100 ? '#55ba4c' : 'red' }">
                    {{ it.name_exper }}
                  </text>
                </view>
                <view class="runningtime_exper">
                  <text class="text">
                    时长:{{ parseFloat(it.runningtime_exper / 60).toFixed(1) }}小时
                  </text>
                </view>
                <view class="rate_exper">
                  <text class="text">
                    完成度:{{ it.rate_exper }}%
                  </text>
                </view>
              </view>
              <!-- <button class="delete" @click="deleteItem(ind)">删除</button> -->
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>

<script>
//删除所有历史实验
//获取某设备所有实验记录列表信息
import {_deleteHistory, _equipGetHistory, _allhistory} from '@/service/history.js'
import UniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
import StatusBar from "@/components/status-bar/status-bar.vue";

export default {
  components: {StatusBar, UniNavBar},
  data() {
    return {
      account_user: '',
      serialnum_equip: null,
      serialnum_history: '',
      menulist: [],
      Allnums: '',
      Alltimes: '',
      times: '',
      completeness: '30%',
      options: [{
        text: '删除',
        style: {
          backgroundColor: '#dd524d'
        }
      }],

      //长按数组的下标
      longPressIndex: null,
      longindex: null,
    }
  },
  mounted() {
    let newdata;
    try {
      const value = uni.getStorageSync('userInfo');
      if (value != null) {
        this.account_user = value.accountNum
        console.log(this.account_user);
      }
    } catch (e) {
      console.error(e);
    }

    this.getdata();
  },
  onLoad(options) {
    const {serialnum_equip} = options;
    if (serialnum_equip) {
      this.serialnum_equip = serialnum_equip;
    }
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url,
        success(res) {
          console.log("成功", res)
        },
        fail(res) {
          console.log("失败", res)
        }
      })
    },
    navBack() {
      uni.navigateBack({})
    },
    async getdata() {
      let res;
      if (this.serialnum_equip !== null) {
        res = await _equipGetHistory({
          serialnum_equip: this.serialnum_equip
        });
      } else {
        res = await _allhistory({
          account_user: this.account_user
        });
      }
      this.menulist = res.data;
    },
    getAllnums() {
      let Allnums = 0;
      for (let i = 0; i < this.menulist.length; i++) {
        Allnums += this.menulist[i].histories.length;
      }
      return Allnums;
    },
    getAlltimes() {
      let Alltimes = 0;
      let times = 0;
      for (let i = 0; i < this.menulist.length; i++) {
        for (let j = 0; j < this.menulist[i].histories.length; j++) {
          times += this.menulist[i].histories[j].runningtime_exper;
        }
        Alltimes += times;
        times = 0;
      }
      return parseFloat(Alltimes).toFixed(1);
      // return Alltimes
    },

    allExperDelete() {
      uni.showModal({
        title: "删除记录",
        content: "确认删除所有实验记录？",
        success: function (e) {
          if (e.confirm) {
            this.deleteHistory()
            this.$api.msg('删除成功！');
          }
        }.bind(this)
      })
    },
    async deleteHistory() {
      for (let i = 0; i < this.menulist.length; i++) {
        for (let j = 0; j < this.menulist[i].histories.length; j++) {
          let m = this.menulist[i].histories[j].serialnum_history
          let data = {
            // serialnum_history:this.serialnum_history
            serialnum_history: m
          }
          let res = await _deleteHistory(data);
          if (res.flag = true) {
            this.$api.msg('删除成功！');
          } else {
            this.$api.msg('删除失败！');
          }
          console.log(m)
        }
      }
    },

    async deleteHistory1() {
      console.log(this.longindex)
      console.log(this.longPressIndex)
      // for(let i=0;i<this.menulist.length;i++){
      let m = this.menulist[this.longindex].histories[this.longPressIndex].serialnum_history
      let data = {
        serialnum_history: m
      }
      let res = await _deleteHistory(data);
      if (res.flag = true) {
        this.$api.msg('删除成功！');
      } else {
        this.$api.msg('删除失败！');
      }
      console.log(m)
      // }
    },

    showMenu(index, ind) {
      this.longPressIndex = ind;
      this.longindex = index;
      const self = this; // Assign the context (this) to a variable

      uni.showModal({
        title: '提示',
        content: '是否删除本次实验',
        success(res) {
          if (res.confirm) {
            // 用户点击确定，执行删除操作
            self.deleteHistory1(); // Use the variable instead of this
            self.menulist[self.longindex].histories.splice(self.longPressIndex, 1);
          }
        }
      });
    },
    startPress(e, index, ind) {
      this.pressTimer = setTimeout(() => {
        this.showMenu(index, ind);
      }, 1000); // 设置长按的时间阈值，单位为毫秒
    },
    endPress() {
      clearTimeout(this.pressTimer);
    }
  }
}
</script>

<style lang="scss">
page {
  min-height: 100%;
  background: #e5e5e569;
}

uni-view {
  display: block;
  border-radius: 20upx;
}

.name_exper {
  width: 120px; /* 根据实际情况调整宽度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.runningtime_exper, .rate_exper {
  width: 80px; /* 根据实际情况调整宽度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.button_box {
  display: flex;
  width: 100%;
  padding-top: 40upx;

  button {
    background-color: #999;
    color: #fff;
    padding-left: 100upx;
    padding-right: 100upx;
    font-size: 33upx;
    height: 80upx;
    line-height: 80upx;
    border-radius: 50upx;
    margin-bottom: 40upx;
  }
}

.statistics {
  color: black;
  font-weight: 700;
  width: 710upx;
  height: 120upx;
  display: flex;
  margin: 20upx 20upx 10upx 20upx;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.leftTitle {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rightTitle {
  width: 65%;
  display: flex;
  float: right;
  align-items: center;
  justify-content: center;
}

.collapse_box {
  background: white;
  padding: 20upx;
  margin: 20upx;
  border-radius: 20upx;
}

.text_box {

  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.text {
  color: black;
  font-weight: 600;
  display: block;
}

.exper-single {
  padding: 10upx;
  border-bottom: 1px;
  height: 60upx;
  display: flex;
  background-color: #eee;
  margin-top: 5upx;
  margin-bottom: 5upx;
}

.biaoshi {
  width: 53.33upx;
  height: 53.33upx;
}
</style>
